<template>
  <div class="swip">
   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item class="sw1">
    <div class="pl10 pr10 rela" style="padding-top: 110px;">
      <img src="https://img2.epetbar.com/2021-01/12/09/afb4d4c6566a229e0c2672a785808188.jpg?x-oss-process=style%2Fcut&%241=710&%242=240" class="swiperimg">
    </div>
    <div class="bgcolor abs"></div>
    <div class="radian">
      <img src="../../assets/img/bg.png" class="db">
    </div>
  </van-swipe-item>
  <van-swipe-item class="sw2">
<div class="pl10 pr10 rela" style="padding-top: 110px;">
      <img src="https://img2.epetbar.com/nowater/2020-09/30/14/d559ba53248052b495de7130a94b38e7.jpg?x-oss-process=style%2Fcut&%241=710&%242=240" class="swiperimg">
    </div>
    <div class="bgcolor abs"></div>
    <div class="radian">
      <img src="../../assets/img/bg.png" class="db">
    </div>
  </van-swipe-item>
  <van-swipe-item class="sw3">
<div class="pl10 pr10 rela" style="padding-top: 110px;">
      <img src="https://img2.epetbar.com/nowater/2020-08/28/11/7c50f862c8bbddea8b2a94987edd92cd.jpg?x-oss-process=style%2Fcut&%241=710&%242=240" class="swiperimg">
    </div>
    <div class="bgcolor abs"></div>
    <div class="radian">
      <img src="../../assets/img/bg.png" class="db">
    </div>
  </van-swipe-item>
  <van-swipe-item class="sw4">
    <div class="pl10 pr10 rela" style="padding-top: 110px;">
      <img src="https://img2.epetbar.com/2020-09/07/13/ae0c0694a0cfc26a8906aa8d75b15bf9.jpg?x-oss-process=style%2Fcut&%241=710&%242=240" class="swiperimg">
    </div>
    <div class="bgcolor abs"></div>
    <div class="radian">
      <img src="../../assets/img/bg.png" class="db">
    </div>
  </van-swipe-item>
  <van-swipe-item class="sw5">
    <div class="pl10 pr10 rela" style="padding-top: 110px;">
      <img src="https://img2.epetbar.com/nowater/2020-12/15/11/d563720c7287b820c32b25a0fe4f79e5.jpg?x-oss-process=style%2Fcut&%241=710&%242=240" class="swiperimg">
    </div>
    <div class="bgcolor abs"></div>
    <div class="radian">
      <img src="../../assets/img/bg.png" class="db">
    </div>
  </van-swipe-item>
  <van-swipe-item class="sw6">
    <div class="pl10 pr10 rela" style="padding-top: 110px;">
      <img src="https://img2.epetbar.com/2021-01/06/16/dd9a3491124e4d2d361cceda22ce7836.jpg?x-oss-process=style%2Fcut&%241=710&%242=240" class="swiperimg">
    </div>
    <div class="bgcolor abs"></div>
    <div class="radian">
      <img src="../../assets/img/bg.png" class="db">
    </div>
  </van-swipe-item>
</van-swipe>
        
      </div>
    
  
</template>
  <script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { Lazyload } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
export default{
  
}
</script>
<style lang="stylus" scoped>
.swip
   
    min-width 3.2rem
    max-width 7.5rem
    margin auto
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 0.2rem;
    text-align: center;
    
   
  }
.pl10
  padding-left 0.1rem
.pr10
  padding-right 0.1rem  
.rela
  position relative
.swiperimg
  position relative
  z-index 2
  width 100%
  border-radius 0.1rem
 
.bgcolor {
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    z-index: -1;
}
.abs {
    position: absolute;
}
.radian {
    position: absolute;
    left: 0;
    width: 100%;
    top: 82%;
    z-index: 1;
}
.db {
    display: block;
    width 100%
    padding-bottom 0px
}
img {
    vertical-align: middle;
}
.sw1
  background-color #c13d17
.sw2
  background-color #0e2758
.sw3
  background-color #1d95f0
.sw4
  background-color #2044d9
.sw5
  background-color #dd642a
.sw6
  background-color #ff6f67
</style>